<!-- 短句 -->
<template>
  <BaseLayout>
    <div class="toolbar">
      <div class="btn" @click="handlerClickBtnHome"><IconHome /></div>
      <div class="slt-w">
        <select v-model="len" @change="handlerClickRefresh">
          <option v-for="item in maxLen" :key="item">{{ item }}</option>
        </select>
      </div>
      <div class="btn" @click="handlerClickRefresh"><IconReset /></div>
      <div class="btn" @click="handlerClickConfirm"><IconConfirm /></div>
    </div>
    <div class="cells">
      <div class="cell" v-for="(item, idx) in dataList" :key="idx">
        <div class="txt">{{ item[0] }}</div>
        <div class="ipt-w">
          <div class="ipt-bd">
            <SyTextarea class="ipt" :class="dataAnswer[idx]" v-model:value="dataValues[idx]"></SyTextarea>
            <div class="ipt answer" v-if="switchAnswer[idx]">{{ item[1] }}</div>
          </div>
          <div class="btn" @click="handlerClickPrompt(idx)"><IconPrompt /></div>
          <div class="btn" @click="handlerClickClear(idx)"><IconEraser /></div>
        </div>
      </div>
    </div>
  </BaseLayout>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import BaseLayout from '../layout/base.vue'
import IconReset from '../svg/IconReset.vue'
import IconConfirm from '../svg/IconConfirm.vue'
import IconEraser from '../svg/IconEraser.vue'
import IconHome from '../svg/IconHome.vue'
import IconPrompt from '../svg/IconPrompt.vue'
import SyTextarea from '../components/SyTextarea.vue'
import { useRouter } from 'vue-router'
import sentences from '../data/sentences.ts'

const router = useRouter()
const switchAnswer = ref<boolean[]>([])
const len = ref(6)
const maxLen = ref<number[]>([])
const dataList = ref<any[]>([])
const dataValues = ref<string[]>([])
const dataAnswer = ref<string[]>([])
// 刷新点击
const handlerClickRefresh = () => {
  getSentences()
}
// 刷新列表
const getSentences = () => {
  maxLen.value = []
  switchAnswer.value = []
  dataValues.value = []
  dataAnswer.value = []
  let maxIdx = sentences.length
  for (var i = 1; i <= maxIdx; i++) {
    if (i % 6 === 0) {
      maxLen.value.push(i)
    }
  }
  dataList.value = []
  let result: number[] = []
  for (var i = 0; i < len.value; i++) {
    var number = Math.floor(Math.random() * maxIdx)
    while (result.includes(number)) {
      number = Math.floor(Math.random() * maxIdx)
    }
    result.push(number)
    dataList.value.push(sentences[number])
  }
}

getSentences()

//
const handlerClickClear = (idx: number) => {
  dataValues.value[idx] = ''
}
//
const handlerClickConfirm = () => {
  for (let idx = 0; idx < dataValues.value.length; idx++) {
    const val = dataValues.value[idx]
    const flag = val === dataList.value[idx][1]
    dataAnswer.value[idx] = flag ? 'success' : 'error'
  }
}
//
const handlerClickBtnHome = () => {
  router.push({ name: 'home' })
}
// 显示提示
const handlerClickPrompt = (idx: number) => {
  switchAnswer.value[idx] = !switchAnswer.value[idx]
}
</script>
<style scoped lang="scss">
.toolbar {
  display: flex;
  padding: 0.12rem;
  border-bottom: 1px solid #666;
  .slt-w {
    flex: 1;
    select {
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 20px;
    }
  }
  .btn {
    width: auto;
    height: auto;
  }
  * {
    & + * {
      margin-left: 0.12rem;
    }
  }
}
.cells {
  padding: 0.24rem 0.12rem;
  overflow: auto;
  .cell {
    & + .cell {
      margin-top: 0.24rem;
    }
    .txt {
      font-size: 0.35rem;
    }
    .ipt-w {
      margin-top: 0.12rem;
      display: flex;
      align-items: flex-start;
      font-size: 0;
      .ipt-bd {
        flex: 1;
        .ipt {
          width: 100%;
          padding: 0.12rem;
          border: 1px solid #666;
          font-size: 0.4rem;
          line-height: 24px;
          font-family: 'Times New Roman', Times, serif;
          min-height: 24px;
          outline: none;
          box-sizing: border-box;
          overflow: hidden;
          border-radius: 0.0701754386rem;
          transition: all 0.2s linear;
          &.success {
            border-color: #0f0;
            border-radius: 0.1rem;
            box-shadow: 0 0 10px 0px #0f0;
          }
          &.error {
            border-color: #f00;
            border-radius: 0.1rem;
            box-shadow: inset 0 0 10px 0px #f00;
          }
        }
        .answer {
          margin-top: 0.12rem;
          border-color: transparent;
        }
      }
      .btn {
        margin-left: 0.12rem;
      }
    }
  }
}
</style>
